<template>
  <div class="shop-list" :class="{ 'max': max }">
    <div class="item" :class="{ 'max': max }" v-for="(item, index) in list" :key="index" @click="go(item)">
      <div class="image">
        <img :src="item.merchant_avatar" />
      </div>
      <div class="name">{{ item.merchant_name }}</div>
      <div class="mobile" v-if="false"><span>电话:</span> {{ item.mobile }}</div>
      <div class="address" v-if="false"><span>地址:</span> {{ item.merchant_address }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    max: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    go(item) {
      this.$router.push(`/ss-shop/${item.id}`)
    }
  }
}
</script>

<style scoped lang="stylus">
.shop-list
  display flex
  flex-wrap wrap
  justify-content start
  &.max
    justify-content space-between
  .item
    width 25%
    background white
    padding 5px
    box-sizing border-box
    display flex
    flex-direction column
    justify-content space-between
    &.max
      width 49%
    .image
      width 100%
    .name
      height 30px
      line-height 30px
      overflow hidden
      color #000
      //background red
</style>
